<!DOCTYPE html>
<html lang="en">
<head>
    <!-- UTF-8，防止中文乱码 -->
    <meta charset="UTF-8">

    <!-- 浏览器标签页标题 -->
    <title>探索HTML的奥秘 - 我的学习笔记</title>

    <!-- 移动端设置, 让布局宽度等于设备宽度，初始缩放 1 倍，禁止默认缩小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 描述，用于搜索引擎 -->
    <meta name="description" content="这是一个关于HTML元数据、文本、图片、表格、表单及HTML5语义化标签应用的详细教程与示例页面。">

    <!-- 关键字，用于搜索引擎 -->
    <meta name="keywords" content="HTML, 元数据, 教程, 前端开发, Web开发, 语义化标签">

    <!-- 作者-->
    <meta name="author" content="故柠">
</head>
<body>
    <h2>3. 表格</h2>
    <!-- table 包裹整张表；border="1" 仅作演示，实际布局用 CSS 控制边框更灵活 -->
    <table border="1">
        <!-- caption 为整张表提供可访问的“标题”，屏幕阅读器会优先读出 -->
        <caption>学生信息表</caption> 
        <!-- thead 封装列标题行，打印时若表格跨页可重复出现；语义上区别于数据区 -->
        <thead>
            <tr>
                <!-- th 表示“列头单元格”，默认加粗居中，scope="col" 可显式声明其作用于列 -->
                <th>学号</th> 
                <th>姓名</th> 
                <th>专业</th>
            </tr>
        </thead>
        <!-- tbody 包裹纯数据行，可多个（方便分组排序或动态渲染）；无显式写法浏览器也会自动补 -->
        <tbody>
            <tr>
                <!-- td 为普通数据单元格；与 th 配合让表格语义完整 -->
                <td>2021001</td> 
                <td>小明</td> 
                <td>计算机科学</td>
            </tr>
            <tr>
                <td>2021002</td> 
                <td>小红</td> 
                <td>软件工程</td>
            </tr>
        </tbody>
        <!-- tfoot 放汇总、脚注或说明；即使写在 tbody 前，浏览器仍将其渲染在表格最下方 -->
        <tfoot> 
            <tr>
                <!-- colspan="3" 让单元格横向占 3 列，常用于合并底部说明或统计栏 -->
                <td colspan="3">注：此为示例数据</td> 
            </tr>
        </tfoot>
    </table>

    <h2>4. 表单</h2>
    <!-- action 指定数据提交目标 URL；method="POST" 把数据放在请求体，适合敏感或大量信息 -->
    <form action="/submit-handler" method="POST"> 
        <!-- fieldset 将相关控件归为一组，提升可访问性；legend 给这组控件一个可见标题 -->
        <fieldset> 
        <legend>用户登录</legend> 

        <!-- for="username" 与 input 的 id 关联：点击文字即可聚焦输入框，无障碍必备 -->
        <label for="username">用户名:</label> 
        <!-- required 让浏览器原生校验非空；placeholder 提供浅色提示文本，不会随表单提交 -->
        <input type="text" id="username" name="username" required placeholder="请输入用户名"><br><br>

        <label for="password">密码:</label>
        <!-- type="password" 自动掩码输入；name 用于后端接收字段名 -->
        <input type="password" id="password" name="password" required><br><br>

        <label for="avatar">上传头像:</label>
        <!-- accept="image/*" 调起文件选择器时默认过滤非图片文件，减少用户误选 -->
        <input type="file" id="avatar" name="avatar" accept="image/*"><br><br>

        <label for="country">国家:</label>
        <!-- select 提供单选下拉；首项空值配合 required 可强制用户主动选择 -->
        <select id="country" name="country">
            <option value="">--请选择--</option>
            <option value="china">中国</option>
            <option value="usa">美国</option>
        </select><br><br>

        <!-- 同一组单选按钮必须共享 name 值，才能实现互斥效果 -->
        <label>性别:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label><br><br>

        <!-- 多选框通过同名 name="hobbies" 提交时后端可收到数组；value 为实际入库/处理的标识 -->
        <label>兴趣（可多选）:</label>
        <input type="checkbox" id="coding" name="hobbies" value="coding">
        <label for="coding">编程</label>
        <input type="checkbox" id="music" name="hobbies" value="music">
        <label for="music">音乐</label>
        <input type="checkbox" id="sports" name="hobbies" value="sports">
        <label for="sports">运动</label><br><br>

        <!-- textarea 用于多行文本；rows/cols 给出默认尺寸，可用 CSS 更灵活控制 -->
        <label for="message">个人简介:</label><br>
        <textarea id="message" name="message" rows="4" cols="40" placeholder="介绍一下你自己..."></textarea><br><br>

        <!-- type="submit" 触发 form 提交；type="reset" 清空整个表单；type="button" 无默认行为，需手写 JS -->
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <!-- onclick 内联事件仅作演示，生产环境建议外部绑定，保持结构行为分离 -->
        <button type="button" onclick="alert('Hello!')">普通按钮</button> 
        </fieldset>
    </form>
</body>